<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{admin_setting('title')}}</title>
    <meta name="description" content="{{admin_setting('description')}}">
    <meta name="keywords" content="{{admin_setting('keywords')}}">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
            }
            .stat-card {
                @apply bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100;
            }
            .feature-card {
                @apply bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 card-hover;
            }
        }
    </style>
</head>
<body class="font-inter bg-white text-dark antialiased">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 md:px-6 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center text-white">
                    <i class="fa-solid fa-link text-xl"></i>
                </div>
                <span class="text-xl font-bold text-dark">{{admin_setting('name')}}</span>
            </div>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#" class="text-dark hover:text-primary transition-colors font-medium">首页</a>
                <a href="#features" class="text-dark hover:text-primary transition-colors font-medium">功能</a>
                <a href="#pricing" class="text-dark hover:text-primary transition-colors font-medium">价格</a>
                <a href="/dwz" class="text-dark hover:text-primary transition-colors font-medium">共享短网址</a>
                <a href="#faq" class="text-dark hover:text-primary transition-colors font-medium">常见问题</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <a href="/user/login" class="hidden md:block text-dark hover:text-primary transition-colors font-medium">登录</a>
                <a href="/user/register" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">免费注册</a>
                
                <!-- 移动端菜单按钮 -->
                <button id="menuBtn" class="md:hidden text-dark focus:outline-none">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="#" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">首页</a>
                <a href="#features" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">功能</a>
                <a href="#pricing" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">价格</a>
                <a href="#use-cases" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">使用示例</a>
                <a href="#faq" class="text-dark hover:text-primary transition-colors font-medium py-2 border-b border-gray-100">常见问题</a>
                <a href="#" class="text-dark hover:text-primary transition-colors font-medium py-2">登录</a>
            </div>
        </div>
    </header>

    <main class="pt-20">
        <!-- 英雄区域 -->
        <section class="relative overflow-hidden bg-neutral py-16 md:py-24">
            <div class="absolute top-0 right-0 w-1/2 h-full bg-primary/5 -skew-x-12 transform origin-top-right"></div>
            <div class="container mx-auto px-4 md:px-6 relative z-10">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0">
                        <span class="inline-block bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">始于2010，行业领先</span>
                        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-dark mb-6">
                            更安全稳定的<br>
                            <span class="text-primary">域名跳转服务</span>
                        </h1>
                        <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg">
                            {{admin_setting('name')}}支持创建域名重定向和短链接，全自动部署 HTTPS，实时统计链接访问，帮您省时省钱。
                        </p>
                        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                            <a href="/user" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-lg font-medium transition-all shadow-lg hover:shadow-xl text-center">
                                免费使用
                            </a>
                            <a href="#features" class="border-2 border-primary text-primary hover:bg-primary/5 px-8 py-4 rounded-lg font-medium transition-all text-center">
                                <i class="fa-solid fa-play-circle mr-2"></i>了解更多
                            </a>
                        </div>
                        <div class="mt-10 flex items-center">
                            <div class="stat-card flex-1">
                                <div class="text-4xl font-bold text-primary mb-2">28,550,610</div>
                                <div class="text-gray-600">次跳转在近24小时</div>
                            </div>
                            <div class="w-px h-16 bg-gray-200 mx-6"></div>
                            <div class="stat-card flex-1">
                                <div class="text-4xl font-bold text-primary mb-2">0.003秒</div>
                                <div class="text-gray-600">平均响应时间</div>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2 relative">
                        <div class="bg-white rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-all duration-500">
                            <img src="https://picsum.photos/id/180/800/600" alt="{{admin_setting('name')}}域名转发界面" class="w-full h-auto">
                            <div class="absolute top-4 left-4 flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                        </div>
                        <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-xl transform rotate-3 card-hover">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa-solid fa-shield-check"></i>
                                </div>
                                <div>
                                    <p class="font-medium">HTTPS 自动部署</p>
                                    <p class="text-sm text-gray-500">安全加密</p>
                                </div>
                            </div>
                        </div>
                        <div class="absolute -top-6 -left-6 bg-white p-4 rounded-lg shadow-xl transform -rotate-3 card-hover">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center text-accent">
                                    <i class="fa-solid fa-bolt"></i>
                                </div>
                                <div>
                                    <p class="font-medium">全球加速</p>
                                    <p class="text-sm text-gray-500">高速响应</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 信任标识 -->
        <section class="py-12 bg-white">
            <div class="container mx-auto px-4 md:px-6">
                <p class="text-center text-gray-500 mb-8">受到全球领先企业的信任</p>
                <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
                    <img src="https://picsum.photos/id/0/120/40" alt="企业logo" class="h-6 md:h-8 opacity-60 hover:opacity-100 transition-opacity">
                    <img src="https://picsum.photos/id/1/120/40" alt="企业logo" class="h-6 md:h-8 opacity-60 hover:opacity-100 transition-opacity">
                    <img src="https://picsum.photos/id/2/120/40" alt="企业logo" class="h-6 md:h-8 opacity-60 hover:opacity-100 transition-opacity">
                    <img src="https://picsum.photos/id/3/120/40" alt="企业logo" class="h-6 md:h-8 opacity-60 hover:opacity-100 transition-opacity">
                    <img src="https://picsum.photos/id/4/120/40" alt="企业logo" class="h-6 md:h-8 opacity-60 hover:opacity-100 transition-opacity">
                </div>
            </div>
        </section>
        
        <!-- 我可以用{{admin_setting('name')}}来做什么 -->
        <section id="use-cases" class="py-16 md:py-24 bg-white">
            <div class="container mx-auto px-4 md:px-6">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="text-primary font-medium">使用场景</span>
                    <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold text-dark mt-2 mb-6">
                        我可以用{{admin_setting('name')}}来做什么？
                    </h2>
                    <p class="text-lg text-gray-600">
                        {{admin_setting('name')}}允许您将一个域名或域名下的任何路径跳转到任何其他 URL，只要您将域名的 DNS 解析指向我们。
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 使用场景 1 -->
                    <div class="feature-card">
                        <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-6">
                            <i class="fa-solid fa-globe text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">域名顶级重定向</h3>
                        <p class="text-gray-600 mb-4">
                            将 abc.com 直接跳转到您的目标网站，无需复杂配置。
                        </p>
                    </div>
                    
                    <!-- 使用场景 2 -->
                    <div class="feature-card">
                        <div class="w-14 h-14 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary mb-6">
                            <i class="fa-solid fa-link text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">子域名重定向</h3>
                        <p class="text-gray-600 mb-4">
                            配置 www.abc.com 或任何子域名跳转到指定 URL。
                        </p>
                    </div>
                    
                    <!-- 使用场景 3 -->
                    <div class="feature-card">
                        <div class="w-14 h-14 rounded-lg bg-accent/10 flex items-center justify-center text-accent mb-6">
                            <i class="fa-solid fa-compress text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">创建短链接</h3>
                        <p class="text-gray-600 mb-4">
                            在您的域名上创建短链接，例如 you.com/a1，方便分享和追踪。
                        </p>
                    </div>
                    
                    <!-- 使用场景 4 -->
                    <div class="feature-card">
                        <div class="w-14 h-14 rounded-lg bg-green-100 flex items-center justify-center text-green-600 mb-6">
                            <i class="fa-solid fa-star text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">泛域名重定向</h3>
                        <p class="text-gray-600 mb-4">
                            配置 *.abc.com 实现所有子域名的统一或个性化跳转。
                        </p>
                    </div>
                    
                    <!-- 使用场景 5 -->
                    <div class="feature-card">
                        <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600 mb-6">
                            <i class="fa-solid fa-random text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">多地址跳转</h3>
                        <p class="text-gray-600 mb-4">
                            随机或顺序地跳转到多个 URL，适用于负载均衡和 A/B 测试。
                        </p>
                    </div>
                    
                    <!-- 使用场景 6 -->
                    <div class="feature-card">
                        <div class="w-14 h-14 rounded-lg bg-red-100 flex items-center justify-center text-red-600 mb-6">
                            <i class="fa-solid fa-exchange text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">域名更换</h3>
                        <p class="text-gray-600 mb-4">
                            网站更换域名时，将旧域名平滑跳转到新域名，保留流量。
                        </p>
                    </div>
                </div>
                
                <div class="text-center mt-12">
                    <a href="#" class="inline-flex items-center text-primary font-medium">
                        探索更多使用场景 <i class="fa-solid fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 为什么选择{{admin_setting('name')}} -->
        <section id="features" class="py-16 md:py-24 bg-neutral">
            <div class="container mx-auto px-4 md:px-6">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="text-primary font-medium">核心优势</span>
                    <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold text-dark mt-2 mb-6">
                        为什么{{admin_setting('name')}}是行业领先者
                    </h2>
                    <p class="text-lg text-gray-600">
                        我们提供业界领先的域名转发服务，满足您的各种需求
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                    <!-- 优势 1 -->
                    <div class="flex items-start space-x-6">
                        <div class="w-16 h-16 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                            <i class="fa-solid fa-chart-line text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">访问统计报表</h3>
                            <p class="text-gray-600 mb-4">
                                追踪、量化广告投放，优化市场营销活动。跳转及重定向自带访问统计，监控域名访问量，并可以生成专业统计报告，包含访问量趋势、访客地区分布、设备浏览器信息、来源网站、HTTPS 使用情况等。
                            </p>
                            <a href="#" class="text-primary font-medium inline-flex items-center">
                                查看示例报告 <i class="fa-solid fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 优势 2 -->
                    <div class="flex items-start space-x-6">
                        <div class="w-16 h-16 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary flex-shrink-0">
                            <i class="fa-solid fa-shield text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">自动支持 HTTPS</h3>
                            <p class="text-gray-600 mb-4">
                                自动颁发和更新 SSL 证书，我们自动处理您的 HTTP 和 HTTPS 链接的重定向，并全自动化 SSL 证书的管理。只需一次点击，所有现有链接即可安全地使用，不会在浏览器出现安全警告。
                            </p>
                            <a href="#" class="text-secondary font-medium inline-flex items-center">
                                了解 SSL 详情 <i class="fa-solid fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 优势 3 -->
                    <div class="flex items-start space-x-6">
                        <div class="w-16 h-16 rounded-lg bg-accent/10 flex items-center justify-center text-accent flex-shrink-0">
                            <i class="fa-solid fa-eye text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">监控跳转地址</h3>
                            <p class="text-gray-600 mb-4">
                                系统持续监测、提醒和剔除无法访问的目标地址链接。通过{{admin_setting('name')}}多端监控功能可以持续监测您的目标 URL，并在发现损坏链接时及时提醒您，甚至可用自动切换到其他可用地址。
                            </p>
                            <a href="#" class="text-accent font-medium inline-flex items-center">
                                了解监控详情 <i class="fa-solid fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 优势 4 -->
                    <div class="flex items-start space-x-6">
                        <div class="w-16 h-16 rounded-lg bg-green-100 flex items-center justify-center text-green-600 flex-shrink-0">
                            <i class="fa-solid fa-cogs text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">强大的功能</h3>
                            <p class="text-gray-600 mb-4">
                                提供多用户团队支持、子目录转发、全站转发、API 接口集成、友好的管理控制台、多地址随机跳转等丰富功能，满足您的各种需求。
                            </p>
                            <a href="#" class="text-green-600 font-medium inline-flex items-center">
                                查看所有功能 <i class="fa-solid fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 功能特点 -->
        <section class="py-16 md:py-24 bg-white">
            <div class="container mx-auto px-4 md:px-6">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="text-primary font-medium">功能特性</span>
                    <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold text-dark mt-2 mb-6">
                        强大的功能，简单的操作
                    </h2>
                    <p class="text-lg text-gray-600">
                        {{admin_setting('name')}}提供丰富的功能，满足您的各种需求
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- 功能 1 -->
                    <div class="feature-card">
                        <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-4">
                            <i class="fa-solid fa-users"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">多用户团队支持</h3>
                        <p class="text-gray-600">
                            让您和团队成员协作变得更加高效，邀请您团队中的关键成员一起管理域名和重定向。
                        </p>
                    </div>
                    
                    <!-- 功能 2 -->
                    <div class="feature-card">
                        <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary mb-4">
                            <i class="fa-solid fa-folder-tree"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">子目录转发</h3>
                        <p class="text-gray-600">
                            对特定路径或子目录进行单独的301重定向设置，将用户跳转到更相关的页面。
                        </p>
                    </div>
                    
                    <!-- 功能 3 -->
                    <div class="feature-card">
                        <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center text-accent mb-4">
                            <i class="fa-solid fa-globe"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">全站转发</h3>
                        <p class="text-gray-600">
                            将源地址中子目录及参数添加到目标域名中，方便您进行网站域名迁移。
                        </p>
                    </div>
                    
                    <!-- 功能 4 -->
                    <div class="feature-card">
                        <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-600 mb-4">
                            <i class="fa-solid fa-code"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">API 接口集成</h3>
                        <p class="text-gray-600">
                            通过{{admin_setting('name')}} API 接口来实时创建、管理重定向，极大的自由集成重定向功能到您的业务系统。
                        </p>
                    </div>
                    
                    <!-- 功能 5 -->
                    <div class="feature-card">
                        <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600 mb-4">
                            <i class="fa-solid fa-search"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">友好的管理控制台</h3>
                        <p class="text-gray-600">
                            轻松地搜索您的转发或301重定向以找到期待的记录。使用不同的顺序选项可以更快的检索到重定向记录。
                        </p>
                    </div>
                    
                    <!-- 功能 6 -->
                    <div class="feature-card">
                        <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center text-red-600 mb-4">
                            <i class="fa-solid fa-random"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">多地址随机跳转</h3>
                        <p class="text-gray-600">
                            访问者跳转到多个不同的网址，支持顺序、随机模式，多种跳转模式让灰度测试、广告投放更容易。
                        </p>
                    </div>
                </div>
                
                <div class="text-center mt-12">
                    <a href="/user/register" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-lg font-medium transition-all shadow-lg hover:shadow-xl inline-block">
                        免费注册体验
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 价格方案 -->
        <section id="pricing" class="py-16 md:py-24 bg-neutral">
            <div class="container mx-auto px-4 md:px-6">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="text-primary font-medium">透明定价</span>
                    <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold text-dark mt-2 mb-6">
                        选择最适合您的方案
                    </h2>
                    <p class="text-lg text-gray-600 mb-8">
                        我们提供灵活的价格方案，满足不同用户的需求
                    </p>
                    
                    <div class="flex justify-center items-center space-x-4 bg-gray-100 rounded-full p-1 inline-block">
                        <button class="px-6 py-2 rounded-full bg-primary text-white font-medium">月付</button>
                        <button class="px-6 py-2 rounded-full text-gray-600 font-medium hover:bg-gray-200 transition-colors">年付</button>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                    <!-- 免费方案 -->
                    <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 card-hover">
                        <div class="p-8">
                            <h3 class="text-xl font-bold mb-2">免费版</h3>
                            <p class="text-gray-600 mb-6">适合个人使用</p>
                            <div class="flex items-end mb-6">
                                <span class="text-4xl font-bold">¥0</span>
                                <span class="text-gray-500 ml-2">/月</span>
                            </div>
                            <a href="#" class="block w-full py-3 text-center border-2 border-primary text-primary hover:bg-primary/5 rounded-lg font-medium transition-colors mb-8">
                                开始使用
                            </a>
                            <ul class="space-y-4">
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>最多 3 个域名</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>每月 10,000 次跳转</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>基础统计数据</span>
                                </li>
                                <li class="flex items-start space-x-3 text-gray-400">
                                    <i class="fa-solid fa-times mt-1"></i>
                                    <span>HTTPS 支持</span>
                                </li>
                                <li class="flex items-start space-x-3 text-gray-400">
                                    <i class="fa-solid fa-times mt-1"></i>
                                    <span>团队协作</span>
                                </li>
                                <li class="flex items-start space-x-3 text-gray-400">
                                    <i class="fa-solid fa-times mt-1"></i>
                                    <span>API 访问</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 专业版 -->
                    <div class="bg-white border-2 border-primary rounded-xl overflow-hidden shadow-xl transform scale-105 relative z-10">
                        <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 text-sm font-medium">
                            最受欢迎
                        </div>
                        <div class="p-8">
                            <h3 class="text-xl font-bold mb-2">专业版</h3>
                            <p class="text-gray-600 mb-6">适合小型团队</p>
                            <div class="flex items-end mb-6">
                                <span class="text-4xl font-bold">¥39</span>
                                <span class="text-gray-500 ml-2">/月</span>
                            </div>
                            <a href="#" class="block w-full py-3 text-center bg-primary hover:bg-primary/90 text-white rounded-lg font-medium transition-colors mb-8 shadow-lg hover:shadow-xl">
                                开始 14 天免费试用
                            </a>
                            <ul class="space-y-4">
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>无限域名</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>每月 1,000,000 次跳转</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>高级统计和分析</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>所有域名 HTTPS</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>最多 5 人团队</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>基础 API 访问</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 企业版 -->
                    <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 card-hover">
                        <div class="p-8">
                            <h3 class="text-xl font-bold mb-2">企业版</h3>
                            <p class="text-gray-600 mb-6">适合大型组织</p>
                            <div class="flex items-end mb-6">
                                <span class="text-4xl font-bold">¥99</span>
                                <span class="text-gray-500 ml-2">/月</span>
                            </div>
                            <a href="#" class="block w-full py-3 text-center border-2 border-primary text-primary hover:bg-primary/5 rounded-lg font-medium transition-colors mb-8">
                                联系销售
                            </a>
                            <ul class="space-y-4">
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>无限域名</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>无限跳转次数</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>高级统计和分析</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>所有域名 HTTPS</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>无限团队成员</span>
                                </li>
                                <li class="flex items-start space-x-3">
                                    <i class="fa-solid fa-check text-green-500 mt-1"></i>
                                    <span>完整 API 访问</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-12">
                    <p class="text-gray-600">所有方案均包含 14 天退款保证</p>
                </div>
            </div>
        </section>
        
        <!-- 常见问题 -->
        <section id="faq" class="py-16 md:py-24 bg-white">
            <div class="container mx-auto px-4 md:px-6">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="text-primary font-medium">常见问题</span>
                    <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold text-dark mt-2 mb-6">
                        您可能想了解的问题
                    </h2>
                    <p class="text-lg text-gray-600">
                        我们收集了用户最常问的问题，帮助您更好地了解{{admin_setting('name')}}
                    </p>
                </div>
                
                <div class="max-w-3xl mx-auto">
                    <div class="space-y-6">
                        <!-- FAQ 项目 1 -->
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex items-center justify-between p-6 text-left focus:outline-none">
                                <span class="text-lg font-medium">如何设置域名转发？</span>
                                <i class="fa-solid fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    设置域名转发非常简单，只需几个步骤：<br>
                                    1. 注册并登录{{admin_setting('name')}}账户<br>
                                    2. 添加您的域名<br>
                                    3. 设置转发规则（目标 URL、转发类型等）<br>
                                    4. 将域名的 DNS 解析指向{{admin_setting('name')}}提供的服务器<br>
                                    5. 等待 DNS 生效（通常需要几分钟到几小时）
                                </p>
                            </div>
                        </div>
                        
                        <!-- FAQ 项目 2 -->
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex items-center justify-between p-6 text-left focus:outline-none">
                                <span class="text-lg font-medium">{{admin_setting('name')}}支持哪些类型的转发？</span>
                                <i class="fa-solid fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    {{admin_setting('name')}}支持多种转发类型，包括：<br>
                                    - 301 永久重定向（适用于 SEO 和网站迁移）<br>
                                    - 302 临时重定向（适用于临时跳转）<br>
                                    - 隐性转发（iframe 方式，保留原域名显示）<br>
                                    - 带参数转发（保留 URL 参数）<br>
                                    - 泛域名转发（*.domain.com 形式）
                                </p>
                            </div>
                        </div>
                        
                        <!-- FAQ 项目 3 -->
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex items-center justify-between p-6 text-left focus:outline-none">
                                <span class="text-lg font-medium">HTTPS 证书是如何工作的？</span>
                                <i class="fa-solid fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    {{admin_setting('name')}}为所有域名自动提供 HTTPS 支持。当您添加域名并设置转发后，我们会自动为您的域名申请 SSL 证书。这个过程是完全自动化的，您无需手动操作。我们使用 Let's Encrypt 提供的证书，这些证书是浏览器信任的，不会显示安全警告。证书会自动续期，确保您的网站始终保持安全。
                                </p>
                            </div>
                        </div>
                        
                        <!-- FAQ 项目 4 -->
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex items-center justify-between p-6 text-left focus:outline-none">
                                <span class="text-lg font-medium">转发会影响 SEO 吗？</span>
                                <i class="fa-solid fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    使用 301 永久重定向不会对 SEO 产生负面影响，实际上，这是网站更换域名时推荐的方法。搜索引擎会将 301 重定向视为原页面的完全转移，并将原页面的权重传递给新页面。我们的转发服务特别优化了 SEO 性能，确保您的网站在更换域名或设置转发时不会损失搜索引擎排名。
                                </p>
                            </div>
                        </div>
                        
                        <!-- FAQ 项目 5 -->
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex items-center justify-between p-6 text-left focus:outline-none">
                                <span class="text-lg font-medium">我可以将{{admin_setting('name')}}与其他服务集成吗？</span>
                                <i class="fa-solid fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    是的，{{admin_setting('name')}}提供完整的 API，允许您与其他服务集成。您可以使用 API 自动创建、管理和删除转发规则，获取统计数据，以及执行其他操作。此外，我们还提供了与流行工具（如 Zapier）的集成，让您可以轻松地将{{admin_setting('name')}}与其他应用程序连接起来，实现自动化工作流程。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-12">
                        <p class="text-gray-600 mb-4">还有其他问题？</p>
                        <a href="#" class="text-primary font-medium inline-flex items-center">
                            联系我们的支持团队 <i class="fa-solid fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 行动召唤 -->
        <section class="py-16 md:py-24 bg-primary">
            <div class="container mx-auto px-4 md:px-6 text-center">
                <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold text-white mb-6">
                    开始使用{{admin_setting('name')}}域名转发服务
                </h2>
                <p class="text-lg text-white/80 max-w-2xl mx-auto mb-10">
                    加入成千上万的用户，使用{{admin_setting('name')}}实现更高效的域名管理和跳转。无需信用卡，立即开始 14 天免费试用。
                </p>
                <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4">
                    <a href="/user/register" class="bg-white hover:bg-white/90 text-primary px-8 py-4 rounded-lg font-medium transition-all shadow-lg hover:shadow-xl w-full sm:w-auto">
                        免费注册
                    </a>
                    <a href="#" class="border-2 border-white text-white hover:bg-white/10 px-8 py-4 rounded-lg font-medium transition-all w-full sm:w-auto">
                        预约演示
                    </a>
                </div>
                <p class="text-white/60 mt-6">
                    无需信用卡 · 随时取消 · 14 天退款保证
                </p>
            </div>
        </section>
    </main>
    
   
                        
@include('index.mifa.footer')